<!--
 * @Author: your name
 * @Date: 2021-07-31 07:51:52
 * @LastEditTime: 2021-09-09 10:29:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \zuanji-demo\src\components\EZUIKitJs.vue
-->
<template>
  <div class="hello-ezuikit-js">
    <div id="video-container" ref="container" ></div>
  </div>
</template>

<script>
import EZUIKit from 'ezuikit-js'
import { request } from '@/utils/request'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted () {
    this.init()
  },

  methods: {
    // 初始化EZUIKit
    async init () {
      // const url = await this.getLiveAddress()
      const exp = sessionStorage.getItem('exp')
      const accessToken = sessionStorage.getItem('accessToken')
      if (!accessToken || Date.now() > exp) {
        await this.getAccessToken()
      }

      const { width, height } = this.$refs.container.getBoundingClientRect()
      const player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'video-container',
        // accessToken:"at.5eust80k28pq5i8w7blbhl8e4vft3bwq-7slhtrs9dm-1fhprbb-tafuv0h5j",
        // url: "ezopen://NNAJBA@open.ys7.com/F55506257/1.hd.live",
        // AppKey: '1ab49c84ea084013b01c1aa71c7e85ba',
        accessToken: sessionStorage.getItem('accessToken'),
        url: 'ezopen://open.ys7.com/G17513504/1.hd.live',
        // template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        // header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        // plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        footer: ['talk', 'broadcast', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        width,
        height
      })
      console.log(player)
    },
    async getAccessToken () {
      const data = {
        appKey: '1ab49c84ea084013b01c1aa71c7e85ba',
        appSecret: 'b1c39896edc69a80df7f102dacff5dcd'
      }

      const url = `https://open.ys7.com/api/lapp/token/get?appKey=${data.appKey}&appSecret=${data.appSecret}`

      const res = await request(url, 'POST')
      if (res.code === '200') {
        sessionStorage.setItem('accessToken', res.data.accessToken)
        sessionStorage.setItem('exp', res.data.expireTime)
      }
    },

    // 获取播放地址
    async getLiveAddress (deviceSerial = 'F55506257') {
      const accessToken = sessionStorage.getItem('accessToken')
      const exp = sessionStorage.getItem('exp')
      if (accessToken || Date.now() > exp) {
        await this.getAccessToken()
      }

      const url = `https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=${accessToken}&deviceSerial=${deviceSerial}`
      const res = await request(url, 'POST')
      if (res.code === 200) {
        console.log(res)
      }
    }
  }
}
</script>

<style scoped>
.hello-ezuikit-js{
  width: 100%;
  height: 100%;
}

#video-container{
  width: 100%;
  height: 100%;
}
</style>
